<template>
  <div class="order">
    <header>
      <i class="iconfont icon-zuojiantou" @click="goBack"></i>
      <span>提交订单</span>
      <i class="iconfont icon-kefu"></i>
    </header>
    <section>
      <div>
        <div class="ccc">收货信息:</div>
        <div class="address" @click="goPath">
          <div>
            <span class="aaa">{{ dp.name }}</span>
            <span>{{ dp.tel }}</span>
          </div>
          <div class="bbb">
            <span>{{ dp.province }}</span>
            <span>{{ dp.city }}</span>
            <span>{{ dp.county }}</span>
            <span>{{ dp.addressDetail }}</span>
          </div>
        </div>
        <div class="pay">
          <div class="top">
            <span class="ddd">支付方式: </span>
            <span style="color: red">选择在线支付，随机减0-100元</span>
          </div>
          <van-radio-group v-model="radio">
            <van-radio name="wx">微信支付</van-radio>
            <van-radio name="zfb">支付宝支付</van-radio>
          </van-radio-group>
        </div>
        <div class="goods">
          <ul>
            <li v-for="(item, index) in gi" :key="index">
              <div>
                <img :src="item.goods_imgUrl" alt="" />
              </div>
              <div class="goods-content">
                <h4>{{ item.goods_name }}</h4>
                <div class="goods-total">
                  <span>￥{{ item.goods_price }}</span>
                  <span>x{{ item.goods_num }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <footer>
      <div class="left">
        <span
          >共 <span class="red">{{ orderData.goods_num }}</span> 件，</span
        >
        <span>总金额：</span>
        <span style="color: red; font-style: italic"
          >￥{{ orderData.goods_price }}</span
        >
      </div>
      <div class="right" @click="goPayment">提交订单</div>
    </footer>
  </div>
</template>

<script>
import http from "@/common/request";
import { mapGetters, mapMutations, mapState } from "vuex";
import { Toast } from "vant";
import bus from "@/common/bus";
import qs from 'qs';

export default {
  data() {
    return {
      radio: "wx",
      dp: {},
      item: [],
      goodsList: [],
      orderData: {},
      gi: [],
    };
  },
  activated() {
    bus.$on(
      "selectPath",
      function (data) {
        this.dp = JSON.parse(data);
      }.bind(this)
    );
    this.getOrderData();
  },
  mounted() {
    this.getData();
    this.item = this.$route.query.detail;
    this.gi = JSON.parse(this.$route.query.goodsList);
  },
  methods: {
    ...mapMutations("path", ["initData"]),
    // 选择地址
    goPath() {
      this.$router.push({
        path: "/path",
        query: {
          type: "order",
        },
      });
    },
    // 提交订单
    async goPayment() {
      // console.log(this.dp);
      if (!this.dp) {
        return Toast("请选择收货地址");
      }
      // 发送请求  1.修改订单状态  2.清空购物车
      let res = await http.$axios({
        url: "/api/submitOrder",
        method: "post",
        headers: {
          token: true,
          //"content-type": "application/x-form-urlencoded",
        },
        data: {
          order_id: this.order_id,
          shopArr: this.selectList,
        },
      });
      //   console.log(res);
      // 状态修改成功  再次发送请求
      let newAr = [];
      this.gi.forEach((v) => newAr.push(v.goods_name));

      let dataOrder = {
        orderId: this.order_id,
        name: newAr.join(''),
        price: this.total.price,
      };
      if (res.success) {
        let ress = await http.$axios({
          url: "/api/payment",
          method: "post",
          headers: {
            token: true,
            "Content-type": "application/x-www-form-urlencoded",
          },
        //   qs是增加安全性的序列化
          data: qs.stringify(dataOrder)
        });
        // console.log(ress);
        if(ress.data.success){
          // 打开支付宝页面
          window.location.href = ress.data.paymentUrl;
        }
      }
    },
    async getOrderData() {
      let res = await http.$axios({
        url: "/api/selectOrder",
        method: "post",
        headers: {
          token: true,
        },
        data: {
          orderId: localStorage.getItem("orderId"),
        },
      });
      this.orderData = res.data[0];
      console.log(111, res);
    },

    goBack() {
      this.$router.back();
    },
    async getData() {
      let res = await http.$axios({
        url: "/api/addressData",
        headers: {
          token: true,
        },
      });

      this.initData(res.data.resultss);
      if (this.defaultPath.length) {
        this.dp = this.defaultPath[0];
      } else {
        this.dp = res.data.resultss[0];
      }
    },
  },
  computed: {
    // ...mapGetters("goods", ["total"]),
    ...mapGetters("path", ["defaultPath"]),
    ...mapGetters('goods',["total"]),
    ...mapState("goods", ["goodsInfo", "selectList"]),
    ...mapState("order", ["list", "order_id"]),
  },
};
</script>
<style scoped>
.goods {
  padding: 15px 10px;
  margin-top: 10px;
  font-size: 16px;
  background-color: white;
  width: 100%;
}
.goods ul {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.goods ul li {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.goods li img {
  width: 80px;
  height: 80px;
}
.goods-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
}
.goods-total {
  display: flex;
  justify-content: space-between;
}
.pay {
  padding: 10px;
  background-color: white;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.pay .top {
  padding-bottom: 10px;
}
.pay .top .ddd {
  padding-right: 10px;
}
.van-radio-group {
  padding-top: 5px;
  display: flex;
}
.van-radio {
  margin-right: 20px;
}
.ccc {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding-left: 10px;
}
.address {
  background-color: white;
  padding: 10px;
  height: 70px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.address div {
  padding: 5px;
}
.address div .aaa {
  padding-right: 15px;
}
.address div .red {
  color: red;
}
.bbb span {
  padding-right: 10px;
}
.red {
  color: red;
}
footer .left {
  width: 70%;
  padding-left: 10px;
}
footer .right {
  flex: 1;
  background-color: red;
  color: #eee;
  height: 100%;
  text-align: center;
  line-height: 8vh;
}
footer {
  box-sizing: border-box;
  height: 8vh;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-top: 2px solid #aaa;
}
.order {
  background-color: #f5f5f5;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
  overflow: hidden;
}
header {
  height: 40px;
  background-color: rgba(210, 0, 0, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #eee;
}
header i {
  height: 100%;
  width: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}
header span {
  font-size: 18px;
}
</style>